<template>
    <el-container :style="{ height:'100%'}">
      <el-header ref="header" :class="'header-' + headerColor" >
        <WelcomeUser />
      </el-header>
      <el-container>
        <el-aside :class="['aside-' + asideColor, 'aside-default']">
          <AsideMenu @open-gpt-web="openGptWebUrl"
          @open-score-statistics-table="openScoreStatisticsDownload"/>


        </el-aside>
        <el-main :class="['main-' + mainColor]">
          <!-- 添加一个用于控制表格显示的状态 -->
             <ReportFormTable v-if="MainVisable['ReportFormTable']"
                              :tableType="tableType" />
             <ReportFormTableAdmin v-if="MainVisable['ReportFormTableAdmin']"
                              :tableType="tableType"/>
             <CourseSelectionTable v-if="MainVisable['CourseSelectionFormTable']"
                                   :table-type="tableType" />
             <CourseAdjustmentTable v-if="MainVisable['CourseAdjustmentFormTable']"
                                   :table-type="tableType" />
             <CourseAdjustmentTableAdmin v-if="MainVisable['CourseAdjustmentFormTableAdmin']"
                                   :table-type="tableType" />
             <EmptyClassroomQuery v-if="MainVisable['EmptyClassroomQuery']" />
             <CourseManagementAdmin v-if="MainVisable['CourseManagementAdmin']" />
             <WebIframe :web-url="web_url"  v-if="MainVisable['WebIframe']" :style="{ height:'100%'}" />
             <ScoreStatisticsDownload v-if="MainVisable['ScoreStatisticsDownload']" />

        </el-main>
      </el-container>
    </el-container>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, watch} from 'vue';
import { defineEmits } from 'vue';
import eventBus from '@/event-bus.js';
import WelcomeUser from "@/components/Main/UserManger/WelcomeUser.vue";
import AsideMenu from "@/components/Main/AsideMenu.vue";
import ReportFormTable from "@/components/Main/ReportManagement/ReportFormTable.vue";
import ReportFormTableAdmin from "@/components/Main/ReportManagement/ReportFormTableAdmin.vue";
import CourseSelectionTable from "@/components/Main/CourseSelection/CourseSelectionTable.vue";
import WebIframe from "@/components/PublicTools/WebIframe.vue";
import ScoreStatisticsDownload from "@/components/Main/ScoreStatistics/ScoreStatisticsDownload.vue";
import CourseAdjustmentTable from "@/components/Main/CourseAdjustmentManagement/CourseAdjustmentTable.vue";
import CourseAdjustmentTableAdmin from "@/components/Main/CourseAdjustmentManagement/CourseAdjustmentTableAdmin.vue";
import EmptyClassroomQuery from "@/components/Main/CourseAdjustmentManagement/EmptyClassroomQuery.vue";
import CourseManagementAdmin from "@/components/Main/CourseAdjustmentManagement/CourseManagementAdmin.vue";
const headerColor = 'blue';
const asideColor = 'green';
const mainColor = 'orange';
const tableType = ref(""); // 假设的报备类型
const MainVisable= ref({
  ReportFormTable: false,
  ReportFormTableAdmin: false,
  CourseSelectionFormTable: false,
  CourseAdjustmentFormTable: false,
  WebIframe: false,
  ScoreStatisticsDownload: false,
  EmptyClassroomQuery: false,
  CourseManagementAdmin: false
});

const web_url= ref("");
onMounted(() => {
  eventBus.on('report-form-table', handleReportFormTable);
  eventBus.on('report-form-table-admin', handleReportFormAdminTable);
  eventBus.on('course-selection-form-table', handleCourseSelectionTable);
  eventBus.on('course-adjustment-form-table', handleCourseAdjustmentTable);
  eventBus.on('course-adjustment-form-table-admin', handleCourseAdjustmentTableAdmin);
  eventBus.on('empty-classroom-query', handleEmptyClassroomQuery);
  eventBus.on('course-management-admin', handleCourseManagementAdmin);

});
onBeforeUnmount(() => {
  eventBus.off('report-form-table', handleReportFormTable);
  eventBus.off('report-form-table-admin', handleReportFormAdminTable);
  eventBus.off('course-selection-form-table', handleCourseSelectionTable);
  eventBus.off('course-adjustment-form-table', handleCourseAdjustmentTable);
  eventBus.off('course-adjustment-form-table-admin', handleCourseAdjustmentTableAdmin);
  eventBus.off('empty-classroom-query', handleEmptyClassroomQuery);
  eventBus.off('course-management-admin', handleCourseManagementAdmin);



});

const handleReportFormTable = (payload) => {
  tableType.value = payload.tableType;
  MainVisable.value.ReportFormTable=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'ReportFormTable') {
      MainVisable.value[key] = false;
    }
  }

};
const handleReportFormAdminTable = (payload) => {
  tableType.value = payload.tableType;
  MainVisable.value.ReportFormTableAdmin=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'ReportFormTableAdmin') {
      MainVisable.value[key] = false;
    }
  }
};
const handleCourseSelectionTable = () => {
  MainVisable.value.CourseSelectionFormTable=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'CourseSelectionFormTable') {
      MainVisable.value[key] = false;
    }
  }
};
const handleCourseAdjustmentTable = () => {
  MainVisable.value.CourseAdjustmentFormTable=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'CourseAdjustmentFormTable') {
      MainVisable.value[key] = false;
    }
  }
}

const handleCourseAdjustmentTableAdmin = () => {
  MainVisable.value.CourseAdjustmentFormTableAdmin=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'CourseAdjustmentFormTableAdmin') {
      MainVisable.value[key] = false;
    }
  }
}

const handleEmptyClassroomQuery = () => {
  MainVisable.value.EmptyClassroomQuery=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'EmptyClassroomQuery') {
      MainVisable.value[key] = false;
    }
  }
}
const handleCourseManagementAdmin = () => {
  MainVisable.value.CourseManagementAdmin=true;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'CourseManagementAdmin') {
      MainVisable.value[key] = false;
    }
  }
}

const openGptWebUrl=(url)=>{
  MainVisable.value.WebIframe=true;
  web_url.value=url;
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'WebIframe') {
      MainVisable.value[key] = false;
    }
  }
}
//下载与查看成绩统计，打开此组件
const openScoreStatisticsDownload=()=>{
  //其它内容置为false用循环
  for (let key in MainVisable.value) {
    if (key !== 'ScoreStatisticsDownload') {
      MainVisable.value[key] = false;
    }
  }
  MainVisable.value.ScoreStatisticsDownload=true;
}

watch(tableType, (newVal) => {
  if (newVal) {
    eventBus.emit('update-report-form-table-type', newVal);
  }
}, { immediate: true }); // 立即执行一次，确保初始值也能触发事件

</script>

<style scoped>

.bg-purple {
  background-color: #ebe0eb;
}

.header-blue {
  background-color: lightblue;
  width: 100%;
}

.aside-green {
  background-color: #f9faf9;
}

.main-orange {
  background-color: #f8f5f5;
}

.aside-default {
  width: 20%;
}

.report-button {
  margin: 10px; /* 为每个按钮添加一些间距 */
}


</style>
